<template>
	<view class="page">
		<!-- 买卖必查 -->
		<view class="stream_box">
			<view class="_flex" style="align-items: flex-end;">
				<view class="title">
					透明车况
				</view>
			</view>
			<view class="transparent-content">
				<navigator class="transparent-content-li" hover-class="none" url="/pagesB/carReport/carReport">
					<view class="transparent-content-item">
						<view class="transparent-content-item-icon">
							<image src="../../static/tab/car_report.png" mode="aspectFit"></image>
						</view>
						<view class="transparent-content-item-text">车辆报告</view>
					</view>
				</navigator>
				<navigator class="transparent-content-li" hover-class="none" url="/pages/batteryReport/batteryReport"
					@click="isShowtoast">
					<view class="transparent-content-item">
						<view class="transparent-content-item-icon">
							<image src="../../static/tab/car_battery.png" mode="aspectFit"></image>
						</view>
						<view class="transparent-content-item-text">电池报告</view>
					</view>
				</navigator>
				<navigator class="transparent-content-li" hover-class="none" url="/pages/actualMileage/actualMileage"
					@click="isShowtoast">
					<view class="transparent-content-item">
						<view class="transparent-content-item-icon">
							<image src="../../static/tab/car_mileage.png" mode="aspectFit"></image>
						</view>
						<view class="transparent-content-item-text">真实里程</view>
					</view>
				</navigator>
				<navigator class="transparent-content-li" hover-class="none"
					url="/pagesB/complainSelect/complainSelect">
					<view class="transparent-content-item">
						<view class="transparent-content-item-icon">
							<image src="../../static/tab/car_complaints.png" mode="aspectFit"></image>
						</view>
						<view class="transparent-content-item-text">投诉查询</view>
					</view>
				</navigator>
				<!-- <navigator class="transparent-content-li" hover-class="none" url="/pagesB/wbRecord/wbRecord"> -->
				<navigator class="transparent-content-li" hover-class="none" @click="isShowtoast">
					<view class="transparent-content-item">
						<view class="transparent-content-item-icon">
							<image src="../../static/tab/car_maintenance.png" mode="aspectFit"></image>
						</view>
						<view class="transparent-content-item-text">维保记录</view>
					</view>
				</navigator>
				<navigator class="transparent-content-li" hover-class="none"
					url="/pages/commercialCarValuation/commercialCarValuation" @click="isShowtoast">
					<view class="transparent-content-item">
						<view class="transparent-content-item-icon">
							<image src="../../static/tab/car_valuation.png" mode="aspectFit"></image>
						</view>
						<view class="transparent-content-item-text">商用车估值</view>
					</view>
				</navigator>
				<navigator class="transparent-content-li" hover-class="none" url="/pagesB/recallSelect/recallSelect">
					<view class="transparent-content-item">
						<view class="transparent-content-item-icon">
							<image src="../../static/tab/car_recall.png" mode=""></image>
						</view>
						<view class="transparent-content-item-text">召回查询</view>
					</view>
				</navigator>

			</view>
		</view>
		<!-- 买卖必查 -->
		<view class="stream_box">
			<view class="_flex" style="align-items: flex-end;">
				<view class="title">
					金融
				</view>
			</view>
			<view class="_flex buyList">
				<view class="buyItem" @click="dkCalculatorClick">
					<!-- <view class="buyItem" @click="isShowtoast"> -->
					<image src="../../static/pg_jr_icon_01.png" style="width: 90rpx;height: 90rpx;" mode="widthFix">
					</image>
					<view class="">
						货款计算器
					</view>
				</view>
				<view class="buyItem" @click="isShowtoast">
					<image src="../../static/pg_jr_icon_02.png" style="width: 90rpx;height: 90rpx;" mode="widthFix">
					</image>
					<view class="">
						车险计算器
					</view>
				</view>
				<view class="buyItem" @click="isShowtoast">
					<image src="../../static/pg_jr_icon_03.png" style="width: 90rpx;height: 90rpx;" mode="widthFix">
					</image>
					<view class="">
						延保计算器
					</view>
				</view>
				<view class="buyItem" @click="isShowtoast">
					<image src="../../static/pg_jr_icon_04.png" style="width: 90rpx;height: 90rpx;" mode="widthFix">
					</image>
					<view class="">
						抵押计算器
					</view>
				</view>
			</view>
		</view>
		<!-- 买卖必查 -->
		<view class="stream_box">
			<view class="_flex" style="align-items: flex-end;">
				<view class="title">
					工具
				</view>
			</view>
			<view class="_flex buyList">
				<view class="buyItem" @click="violationQuery">
					<image src="../../static/pg_gj_icon_01.png" style="width: 90rpx;height: 90rpx;" mode="widthFix">
					</image>
					<view class="">
						违章查询
					</view>
				</view>
				<!-- <view class="buyItem" @click="njCalculatorClick"> -->
				<view class="buyItem" @click="cjCalculatorClick">
					<image src="../../static/pg_gj_icon_02.png" style="width: 90rpx;height: 90rpx;" mode="widthFix">
					</image>
					<view class="">
						年检计算器
					</view>
				</view>
				<view class="buyItem" @click="limitedQuery">
					<image src="../../static/pg_gj_icon_03.png" style="width: 90rpx;height: 90rpx;" mode="widthFix">
					</image>
					<view class="">
						限迁查询
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		URL,
		BASEURL
	} from "../../config.js"
	export default {
		data() {
			return {
				form: {},
			};
		},
		methods: {
			// 商用车估值
			clickCommercialCarValuation() {
				uni.navigateTo({
					url: "../commercialCarValuation/commercialCarValuation"
				})
			},
			// 车辆报告
			carReport() {
				uni.navigateTo({
					url: "/pages/carReport/carReport"
				})
			},
			//真实里程
			actualMileage() {
				uni.navigateTo({
					url: "/pagesB/actualMileage/actualMileage"
				})
			},
			//投诉查询
			complainSelect() {
				uni.navigateTo({
					url: "/pagesB/complainSelect/complainSelect"
				})
			},
			//召回查询
			recallSelect() {
				uni.navigateTo({
					url: "/pagesA/recallSelect/recallSelect"
				})
			},
			// 维保记录
			wbRecord() {
				uni.navigateTo({
					url: "/pagesB/wbRecord/wbRecord"
				})
			},
			// 电池报告
			batteryReportClick() {
				uni.navigateTo({
					url: "/pagesB/batteryReport/batteryReport"
				})
			},
			// 贷款计算器
			dkCalculatorClick() {
				uni.navigateTo({
					url: '/pagesA/calculator/dk_calculator'
				})
			},
			cjCalculatorClick(){
				uni.navigateTo({
					url:'/pagesA/calculator/cj_calculator'
				})
			},
			// 年检计算器
			njCalculatorClick() {
				uni.navigateTo({
					url: '/pagesA/calculator/nj_calculator'
				})
			},
			//违章查询
			violationQuery() {
				uni.navigateTo({
					url: '/pagesB/query/violationQuery'
				})
			},
			//限迁查询
			limitedQuery() {
				uni.navigateTo({
					url: '/pagesB/query/limitedQuery'
				})
			},
			//功能尚未开发
			isShowtoast() {
				uni.showToast({
					title: "功能正在开发中,敬请期待",
					icon: 'none'
				})
			}
		}
	};
</script>
<style lang="scss">
	.stream_box {
		width: 100%;
		background: #fff;
		border-radius: 20rpx;
		padding: 32rpx 28rpx;
		margin-top: 40rpx;
	}

	.title {
		color: #002B56;
		font-size: 46rpx;
		font-weight: bold;
	}

	.buyList {
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.buyList .buyItem {
		width: 25%;
		color: #666666;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.transparent-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0 30rpx;
		box-sizing: border-box;
		flex-wrap: wrap;

		.transparent-content-li {
			width: 25%;

			.transparent-content-item {
				width: 100%;
				text-align: center;
				margin-top: 30rpx;

				.transparent-content-item-icon {
					image {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.transparent-content-item-text {
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}

	.transparent-content:after {
		content: '';
		width: 24%;
		border: 1px solid transparent;
	}
</style>
